<template>
    <div class="search-area">
        <!-- 筛选类型 -->
        <el-select v-model="filterTypeLocal" placeholder="类型" class="short-select">
            <el-option label="日期" value="date"></el-option>
            <el-option label="月份" value="month"></el-option>
        </el-select>

        <!-- 日期选择 -->
        <div v-if="filterTypeLocal === 'date'" class="search-item date-picker">

            <!-- 桌面端 -->
            <el-date-picker
                    v-if="!isMobile"
                    v-model="dateRangeLocal"
                    type="daterange"
                    start-placeholder="起始日期"
                    end-placeholder="结束日期"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    teleported
                    @change="emitValue"
            ></el-date-picker>

            <!-- 手机端 -->
            <div v-else class="mobile-date-range">
                <el-date-picker
                        v-model="startDateLocal"
                        type="date"
                        placeholder="开始"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        teleported
                        @change="emitValue"
                ></el-date-picker>

                <el-date-picker
                        v-model="endDateLocal"
                        type="date"
                        placeholder="结束"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        teleported
                        @change="emitValue"
                ></el-date-picker>
            </div>

        </div>

        <!-- 月份选择 -->
        <div v-else class="search-item date-picker">
            <el-date-picker
                    v-if="!isMobile"
                    v-model="monthRangeLocal"
                    type="monthrange"
                    start-placeholder="开始月份"
                    end-placeholder="结束月份"
                    format="YYYY-MM"
                    value-format="YYYY-MM"
                    teleported
                    @change="emitValue"
            ></el-date-picker>

            <div v-else class="mobile-date-range">
                <el-date-picker
                        v-model="startMonthLocal"
                        type="month"
                        placeholder="开始"
                        format="YYYY-MM"
                        value-format="YYYY-MM"
                        teleported
                        @change="emitValue"
                ></el-date-picker>

                <el-date-picker
                        v-model="endMonthLocal"
                        type="month"
                        placeholder="结束"
                        format="YYYY-MM"
                        value-format="YYYY-MM"
                        teleported
                        @change="emitValue"
                ></el-date-picker>
            </div>
        </div>

        <!-- 搜索按钮 -->
        <el-button type="primary" @click="emitSearch" class="btn-search">
            搜索
        </el-button>
    </div>
</template>

<script setup>
    import {ref, computed} from "vue";

    /**
     * 子组件职责：
     * 1. 接收父组件传来的默认日期
     * 2. 内部维护 dateRange 状态
     * 3. 日期变化时自动 emit 给父组件
     * 4. 点击“查询”时 emit search 事件
     */


    const emit = defineEmits(["update", "search"]);

    // 数据模型
    const filterTypeLocal = ref("date");
    const dateRangeLocal = ref([]);
    const startDateLocal = ref("");
    const endDateLocal = ref("");

    const monthRangeLocal = ref([]);
    const startMonthLocal = ref("");
    const endMonthLocal = ref("");


    // 响应式判断设备
    const isMobile = computed(() => window.innerWidth <= 768);

    // 抛出去的公共方法,让父组件共享数据，这个是自定义方法，在值发生变化的时候，给父组件同步数据
    /*<el-date-picker
                        v-model="endDateLocal"
                        type="date"
                        placeholder="结束"
                        format="YYYY-MM-DD"
                        teleported
                        @change="emitValue"
                ></el-date-picker>*/
    const emitValue = () => {
        /*让父组件共享数据
        * 父组件使用
        * <DateRangeSelector
                        @update="handleDateParams"
                        @search="search"
                />
         handleDateParams 方法就能获取到  emit("update",数据)给的数据
        * */

        emit("update", {
            type: filterTypeLocal.value,
            //PC端日期数据
            dateRange: dateRangeLocal.value,
            monthRange: monthRangeLocal.value,
            //移动端日期数据
            startDate: startDateLocal.value,
            endDate: endDateLocal.value,
            startMonth: startMonthLocal.value,
            endMonth: endMonthLocal.value,
        });
    };

    //自定义方法  点击搜索的时候启动
    const emitSearch = () => {
        emitValue();
        emit("search");
    };
</script>

<style scoped>
    .search-area {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }

    .short-select {
        width: 90px;
    }

    .mobile-date-range {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .date-picker .el-date-editor {
        width: 220px !important;
    }
    .btn-search {
        width: 80px;
    }



    @media (max-width: 768px) {
        .search-area {
            flex-direction: column;
            align-items: stretch;
            width: 100%;
            box-sizing: border-box;
        }

        .mobile-date-range {
            gap: 10px;
        }

        .search-area > * {
            width: 100%;
        }

        .short-select,
        .date-picker .el-date-editor,
        .btn-search {
            width: 100% !important;
            box-sizing: border-box;
        }

    }

    :deep(.el-picker-panel) {
        z-index: 9999 !important;
    }
</style>
